<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo0102-路由01</title>
</head>
<script src="../libs/vue.js"></script>
<script src="../libs/vue-router.3.5.3.js"></script>

<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
      <router-link to="/data/hello01">Go data01</router-link>
      <router-link to="/data/hello-d02">Go data02</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</body>

<script>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = {
  template: '<div>这是home {{username}}</div>',
  computed: {
    username() {
      console.log(this.$route);
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}


const MyData = { 
  computed: {
    routeData() {
      // console.log(this.$route); 
      return this.$route.params
    }
  },
  template: '<div>路由参数为：{{ routeData.p }} <div><button @click="goBack">返回</button></div></div>' ,
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  },
  created:function(){
    console.log('MyData组件-创建');
  },
  destroyed:function(){
    console.log('MyData组件-销毁');
  },
  watch: {
    /**
     * https://v3.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化  
     * 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
     * 
     * 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
     */  
    $route(to, from ) {
      console.log('MyData组件 route变化');
      console.log(to);
      console.log(from);

      // console.log(third); // 不会有第3个参数

    }
  }
}

// Vue.component('home',)

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/data/:p', component: MyData }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});
/*
自己注：大概扫一眼route源码，就是对window.location的封装
vue-router的作用就是将组件与url做匹配
*/

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</html>